<template>
  <div class="tabbar">
    <section class="hero is-success  is-small link">
            <div class="hero-foot">
                <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                      <router-link
                      to="/home"
                      tag="div"
                      >
                       <i class="iconfont">&#xe602;</i>
                      <span>首页</span></router-link>
                      <router-link to="/classic" tag="div">
                      <i class="iconfont">&#xe601;</i><span>分类</span></router-link>
                      <router-link to="/cart" tag="div">
                      <i class="iconfont">&#xe600;</i>
                       <span>购物车</span>
                      </router-link>
                      <router-link to="/mine" tag="div">
                      <i class="iconfont">&#xe603;</i><span>我的考拉</span></router-link>
                    </ul>
                </div>
                </nav>
            </div>
      </section>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'Tabbar',
  computed: {
    /**
     * 计算需要添加到 tabbar 中的路由
     */
    navs () {
      return routes.filter(route => route.meta.isNav)
    }
  }
}
</script>

<style lang="scss" scoped>
  #app .link{
      width: 100%;
      position: fixed;
      bottom: 0;
      background:white;
      color: black;
      ul{
        display: flex;
        justify-content: space-around;
        div{
          width: 25%;;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span{
            font-size: 10px;
          }
        }
      }
      // 在tag="div"后，点击此元素会出现相应类，可用于实现动态效果的唯一切换
      .router-link-exact-active ,.router-link-active {
      color: red;
      // background:lightsteelblue;
      // span{
      //   color: red;
      // }
    }
    }
</style>
